<template>
 <!-- 高级查询开始 -->
    <div v-show="isShow" class="top-search">
      <el-form ref="advancedSearchRef" :model="surper" >
        <el-row :gutter="20" style="margin-bottom: 10px">
          <el-col>
            <span class="textCss">批次 :</span>
            <el-input
			  v-model="surper.batch"
              prop="name"
              placeholder="批次"
              style="width: 230px"
            >
            </el-input>

            <span class="textCss">性别 :</span>
            <el-input
			  v-model="surper.sex"
              prop="year"
              placeholder="性别"
              style="width: 230px"
            >
            </el-input>

            <span class="textCss">户籍类型 :</span>
            <el-input
			  v-model="surper.householdType"
              prop="loginNumber"
              placeholder="户籍类型"
              style="width: 230px"
            >
            </el-input>

            <span class="textCss">应征地 :</span>
            <el-input
		      v-model="surper.bingyiPlace"
              placeholder="应征地"
              style="width: 230px"
              prop="batch"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <span class="textCss">年度 :</span>
            <el-input

              placeholder="年度"
              style="width: 230px"
              prop="nation"
            >
            </el-input>
            <span class="textCss">学历 :</span>
            <el-input
			  v-model="surper.cultureProgram"
              placeholder="学历"
              style="width: 230px"
              prop="cultureralProgram"
            >
            </el-input>

            <span class="textCss">学校名称 :</span>
            <el-input
			  v-model="surper.cultureProgram"
              placeholder="学校名称"
              style="width: 230px"
              prop="householdType"
            >
            </el-input>
            <div class="footer-button">
              <el-button type="primary" plain @click="surperSearchBtn"
                >查询</el-button
              >
              <el-button type="info" plain @click="resetBtn">重 置</el-button>
              <el-button @click="advancedQueryClose">关 闭</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  <!-- 高级检索对话框 -->
  <!-- <el-dialog v-model="isShow" title="高级检索" width="30%">
    <el-form :model="surper" label-width="120px">
      <el-form-item label="户籍查询：">
        <el-input v-model="surper.householdType" />
      </el-form-item>
      <el-form-item label="学校名称查询：">
        <el-input v-model="surper.schoolName" />
      </el-form-item>
      <el-form-item label="学历查询：">
        <el-input v-model="surper.cultureProgram" />
      </el-form-item>
      <el-form-item label="应征地查询：">
        <el-input v-model="surper.bingyiPlace" />
      </el-form-item>
      <el-form-item label="批次查询：">
        <el-select v-model="surper.batch" placeholder="请选择你的批次">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="请选择你的性别">
        <el-radio-group v-model="surper.sex">
          <el-radio label="男" />
          <el-radio label="女" />
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetBtn">重置</el-button>
        <el-button type="primary" @click="surperSearchBtn">查询</el-button>
        <el-button @click="advancedQueryClose">关闭</el-button>
      </span>
    </template>
  </el-dialog> -->
  <!-- 头部查询区域 -->
  <el-header class="el-header">
	<div class="left-panel">
      <el-popconfirm
        confirm-button-text="确认"
        cancel-button-text="取消"
        icon-color="#C00000"
        title="确认批量删除?"
        @confirm="confirmEvent2"
      >
        <template #reference>
          <el-button type="danger" plain>批量删除</el-button>
        </template>
      </el-popconfirm>
      <el-button type="warning" plain @click="getExportData">导出</el-button>

      <el-popconfirm
        confirm-button-text="确认"
        cancel-button-text="取消"
        icon-color="#C00000"
        title="确认下发?"
        @confirm="confirmEvent3"
      >
        <template #reference>
          <el-button type="primary" plain :disabled="!multipleSelection.length">
            <el-icon><el-icon-Plus /></el-icon>
            <span>下发走访任务</span>
          </el-button>
        </template>
      </el-popconfirm>
    </div>
    <div class="right-panel">
     <div class="right-panel-search">
          <div class="mt-4">
            <el-input
              v-model="queryInfo.query"
              placeholder="查询内容"
              class="input-with-select"
			  clearable
			  @clear="getAllData"
            >
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="姓名" value="姓名" />
                  <el-option label="性别" value="性别" />
                  <el-option label="批次" value="批次" />
                  <el-option label="年度" value="年度" />
                  <el-option label="年龄" value="年龄" />
                  <el-option label="学历" value="学历" />
                  <el-option label="民族" value="民族" />
                  <el-option label="应征地" value="应征地" />
				  <el-option label="户籍类型" value="户籍类型" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
				  @click="searchPeople"
                ></el-button>
              </template>
            </el-input>
          </div>
        <el-button type="primary" plain @click="advancedQuery"
          >高级检索</el-button
        >
      </div>
    </div>
  </el-header>

  <!-- 两个按钮 -->
  <div class="btnModel">
    <Button :columns="state.columns"></Button>
  </div>
  <!-- 数据表单 -->
  <el-table
    ref="tableRef"
    :data="state.nowAllList"
    stripe
    :header-cell-style="{ color: '#666', 'text-align': 'center' }"
    :cell-style="{ 'text-align': 'center' }"
    :fit="true"
    style="width: 100%; font-size: 14px"
    ooltip-effect="dark"
    @selection-change="handleSelectionChange"
    class="mainTable"
  >
    <el-table-column type="selection" />
    <template v-for="(item, index) in state.columns" :key="index">
      <el-table-column
        :fixed="index == 0"
        :label="item.name"
        :prop="item.prop"
        :sortable="item.sortable"
        v-if="item.show"
      />
    </template>
    <el-table-column fixed="right" label="操作" width="130" >
      <template v-slot="scope">
        <el-button
          type="text"
          size="small"
          @click="showDetail(scope.row, 'show')"
          >详情</el-button
        >
        <el-button
          style="color: orange"
          type="text"
          size="small"
          @click="showDetail(scope.row, 'edit')"
          >编辑</el-button
        >
        <el-popconfirm
          confirm-button-text="确认"
          cancel-button-text="取消"
          icon-color="#C00000"
          title="确认删除?"
          @confirm="confirmEvent1(scope.row)"
        >
          <template #reference>
            <el-button type="text" size="small" style="color: red"
              >删除</el-button
            >
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区开始 -->
  <div class="page">
    <el-pagination
      v-model:currentPage="queryInfo.pagenum"
      v-model:page-size="queryInfo.pagesize"
      :page-sizes="[10, 20, 25, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 分页区结束 -->

  <!-- 详情页对话框 -->
  <el-dialog v-model="isShowDetail" title="体检合格详情" width="50%">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="姓名">
        <el-input
          :disabled="isEdit"
          v-model="detailData.name"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-input
          :disabled="true"
          v-model="detailData.sex"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="身份证号">
        <el-input
          :disabled="isEdit"
          v-model="detailData.idCard"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="民族">
        <el-input
          :disabled="isEdit"
          v-model="detailData.nation"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="户籍类型">
        <el-input
          :disabled="isEdit"
          v-model="detailData.householdType"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="学校名称">
        <el-input
          :disabled="isEdit"
          v-model="detailData.schoolName"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="学历">
        <el-input
          :disabled="isEdit"
          v-model="detailData.cultureProgram"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="学业情况">
        <el-input
          :disabled="isEdit"
          v-model="detailData.professionSistuation"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="专业名称">
        <el-input
          :disabled="isEdit"
          v-model="detailData.professionTitle"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="专业代码">
        <el-input
          :disabled="isEdit"
          v-model="detailData.professionCode"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="应征地">
        <el-input
          :disabled="isEdit"
          v-model="detailData.bingyiPlace"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="家庭住址">
        <el-input
          :disabled="isEdit"
          v-model="detailData.familyDetail"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="联系方式">
        <el-input
          :disabled="isEdit"
          v-model="detailData.phone"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="身高体重视力"
        ><el-input
          :disabled="isEdit"
          v-model="detailData.bodyData"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="学历审核">
        <el-input
          :disabled="isEdit"
          v-model="detailData.educationReview"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="是否预征">
        <el-input
          :disabled="isEdit"
          v-model="detailData.isOrderSoldiers"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="登记报名时间">
        <el-input
          :disabled="isEdit"
          v-model="detailData.registTime"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="网登编号">
        <el-input
          :disabled="isEdit"
          v-model="detailData.loginId"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
		  <el-button v-show="!isEdit" type="warning" @click="isShowDetail = false"
          >取消</el-button
        >
        <el-button v-show="!isEdit" type="primary" @click="handleEidt"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>


<script setup>
import {
  getData,
  deleteData,
  deleteAllData,
  sendData,
  deriveData,
  searchData,
  surperSearch,
  updatadata
} from "@/api/politics/awaitPolitics";
import Button from "@/components/commom/Button";
import { reactive, ref, onMounted, computed, watch } from "vue";
import { ElMessage } from "element-plus";
let isShowDetail = ref(false);
let detailData = reactive({});
let multipleSelection = ref([]);
const isEdit = ref(false);
// const restaurants = ref([]);
// const state1 = ref("");
// const querySearch = (queryString, cb) => {

//   console.log(queryString);
//   const results = queryString
//     ? restaurants.value.filter((str) => str.value.indexOf(queryString) !== -1)
//     : restaurants.value;
//   // call callback function to return suggestions
//   cb(results);
// };

// const loadAll = () => {
//   console.log(state.nowAllList);
//   return state.nowAllList.map((data) => {
//     return {
//       value: data.name,
//     };
//   });
// };

// const handleSelect = (item) => {
//   console.log(item);
// };

// onMounted(() => {
// });
let selectField = ref('')
const showDetail = function (Ddata, type) {
  if (type === "show") {
    isEdit.value = true;
  } else {
    isEdit.value = false;
  }

  detailData = Object.assign(detailData, Ddata);
  isShowDetail.value = true;
  console.log(detailData);
  console.log(this);
  console.log(bodyData);
};
const handleEidt=async function(){
	isShowDetail.value = false;
	updatadata.url = updatadata.url + `?poliinfoid=${detailData.poliInfoId}`
	updatadata.body = {
		...detailData
	}
	console.log(updatadata.url);
	console.log(updatadata.body);
	const updataRes =await updatadata.put()
	console.log(updataRes);
	 getAllData();
}
// 多选框选中获取该信息
const handleSelectionChange = function (val) {
  multipleSelection.value = [];
  console.log(val);
  val.forEach((item) => {
    multipleSelection.value.push(item.poliInfoId);
  });

  console.log(multipleSelection);
};
// watch(multipleSelection,()=>{
// 	console.log(Array.isArray(multipleSelection));
//   console.log(multipleSelection.length);
// 	console.log(111);
// })
// 批量删除功能
const confirmEvent2 = async function () {
  let deleteBase_url = deleteAllData.url;
  deleteAllData.url =
    deleteAllData.url +
    `?poliInfoId=${multipleSelection.value.join("&poliInfoId=")}`;
  const updatas = await deleteAllData.delete();
  console.log(deleteAllData.url);
  if (updatas.code !== 200) {
    return ElMessage.error("删除失败！");
  } else {
    console.log(1);
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getAllData();
  }
  setTimeout(() => {
    multipleSelection = [];
    deleteAllData.url = deleteBase_url;
  }, 100);
};
// 删除单个列表信息
const confirmEvent1 = async function (val) {
  deleteData.url = deleteData.url + `?poliInfoId=${val.poliInfoId}`;
  const updata = await deleteData.delete(deleteData.url);
  if (updata.code !== 200) {
    return ElMessage.error("删除失败！");
  } else {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getAllData();
  }
};

// 获取数据，渲染表格
const getAllData = async function () {
  const allData = await getData.get();
  console.log(allData);
  state.allList = allData.data;
  queryInfo.total = allData.data.length;
  loadALL = allData.data;
  console.log(loadALL);
  //   restaurants.value = loadAll();
  getPageData();
};

// 实现分页效果
const getPageData = function () {
  let start = (queryInfo.pagenum - 1) * queryInfo.pagesize;
  let end = start + queryInfo.pagesize;
  state.nowAllList = state.allList.slice(start, end);
};

// 分页存储改变大小触发该事件
const handleSizeChange = function (newSize) {
  queryInfo.pagesize = newSize;
  getAllData();
};

// 分页发生变化触发该事件
const handleCurrentChange = function (newPage) {
  queryInfo.pagenum = newPage;
  getAllData();
};

// 高级查询（显示或隐藏）
const advancedQuery = function () {
  isShow.value = true;
  console.log(isShow.value);
};
const advancedQueryClose = function () {
  isShow.value = false;
  resetBtn();
};

// 下发走访任务
const confirmEvent3 = async function () {
  const sendTaskRes = await sendData.post(
    `?poliInfoId=${multipleSelection.value.join("&poliInfoId=")}`
  );
  console.log(sendTaskRes);
  if (sendTaskRes.code !== 200) {
    return ElMessage.error("下发失败！");
  } else {
    ElMessage({
      message: "下发成功",
      type: "success",
    });
    getAllData();
  }
};

// 导出数据功能
const getExportData = function () {
  let Base_deriveData_url = deriveData.url;
  deriveData.url =
    deriveData.url +
    `?poliInfoId=${multipleSelection.value.join("&poliInfoId=")}`;
  console.log(deriveData.url);
  window.location.href = deriveData.url;
  deriveData.url = Base_deriveData_url;
};

// 根据姓名查找功能
const searchPeople = async function () {
  if (!queryInfo.query) {
    getAllData();
    return;
  }
  const search = await searchData.post(`?name=${queryInfo.query}`);
  if (queryInfo.query) {
    console.log(search);
    console.log(search.data);
    state.nowAllList = search.data;
    ElMessage({
      message: search.msg,
      type: "success",
    });
  }

  if (!search.data) {
    ElMessage({
      message: search.msg,
      type: "error",
    });
  }
};
// 高级查询
const surperSearchBtn = async function () {
  console.log(surperSearch.url);
  surperSearch.body = {
    ...surper,
  };
    console.log(surperSearch);
  console.log(surperSearch.body);
  const surperSearchRes = await surperSearch.post();
  console.log(surperSearchRes);
  state.nowAllList = surperSearchRes.data;
  ElMessage({
    message: surperSearchRes.msg,
    type: "success",
  });
};
// 高级查询-重置按钮
const resetBtn = function () {
  for (const key in surper) {
    if (Object.hasOwnProperty.call(surper, key)) {
      surper[key] = null;
    }
  }
  getAllData()
};
const isShow = ref(false);
const state = reactive({
  columns: [
    { name: "姓名", show: true, prop: "name" },
    { name: "性别", show: true, prop: "sex" },
    { name: "年度", show: true, prop: "year", sortable: true },
    { name: "批次", show: true, prop: "batch", sortable: true },
    { name: "年龄", show: true, prop: "age", sortable: true },
    { name: "民族", show: true, prop: "nation" },
    { name: "户籍类型", show: true, prop: "householdType" },
    { name: "学历", show: true, prop: "cultureProgram" },
    { name: "应征地", show: true, prop: "bingyiPlace" },
    { name: "政审结果", show: true, prop: "poliCarefulState" },
  ],
  // 全部的数据
  allList: [],
  // 页面显示的数据
  nowAllList: [],
});
// 获取用户列表的参数对象
const queryInfo = reactive({
  query: "",
  //当前页数
  pagenum: 1,
  //当前每页显示多少条数据
  pagesize: 10,
  // 总数
  total: 0,
});
// 接收高级查询内容
const surper = reactive({
  sex: null,
  batch: null,
  householdType: null,
  schoolName: null,
  cultureProgram: null,
  bingyiPlace: null,
});
// 输入框下拉框数据
let loadALL = reactive({});
// 身体指数
const bodyData = computed(() => {
  return (
    detailData.tall +
    "/" +
    detailData.weight +
    "/" +
    detailData.leftEyesight +
    "/" +
    detailData.rightEyesight
  );
});
// 多选框选中数组长度
// const formLabelWidth = ref("px")
onMounted(() => {
  getAllData();
  console.log(state.allList.tall);
});
watch(queryInfo, (queryInfo) => {
  if (queryInfo.query === "") {
    searchPeople();
  }
});
</script>

<style scoped>
.left-panle {
  display: flex;
  align-items: center;
  width: 380px;
  justify-content: space-around;
}
.right-panle {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-around;
  width: 720px;
}
.btn1 {
  margin-left: 20px;
}

.el-table {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 10px;
}
.allbtn {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 5px;
}
.el-descriptions-item {
  margin-bottom: 1000px;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.checkboxCss {
  display: flex;
  flex-direction: column;
}
/* 高级查询 */
.top-search {
  width: 100%;
  margin-top: 20px;
  /* display: none; */
}
.top-search .textCss {
  font-size: 10px;
  margin-left: 30px;
  margin-right: 10px;
  /* margin:0px 0px 20px 10px; */
}

.top-search .inputCss {
  width: 210px;
}
.footer-button {
  margin-left: 100px;
  display: inline-block;
}

.el-header {
	display: flex;
	justify-content: space-between;
}
.top-search {
  width: 100%;
}
.top-search .textCss {
  font-size: 15px;
  margin-left: 30px;
  margin-right: 10px;
}

.top-search .inputCss {
  width: 210px;
}
.footer-button {
  margin-left: 80px;
  display: inline-block;
}

.top_button {
  display: flex;
  justify-content: space-between;
}
</style>
